'use client'

import { BackButton } from "@/components/ui/back-button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export default function BackButtonExample() {
  const handleCustomClick = () => {
    alert('自定义点击事件被触发！')
  }

  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center gap-2 mb-6">
        <BackButton href="/" variant="ghost" size="sm">
          返回首页
        </BackButton>
        <h1 className="text-2xl font-bold">返回按钮组件示例</h1>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* 基础用法 */}
        <Card>
          <CardHeader>
            <CardTitle>基础用法</CardTitle>
            <CardDescription>默认返回上一页</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <BackButton>返回</BackButton>
            <BackButton variant="outline">返回（轮廓样式）</BackButton>
            <BackButton variant="ghost">返回（幽灵样式）</BackButton>
          </CardContent>
        </Card>

        {/* 自定义路径 */}
        <Card>
          <CardHeader>
            <CardTitle>自定义路径</CardTitle>
            <CardDescription>导航到指定页面</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <BackButton href="/questionnaire">返回问卷列表</BackButton>
            <BackButton href="/courses">返回课程页面</BackButton>
            <BackButton href="/profile">返回个人中心</BackButton>
          </CardContent>
        </Card>

        {/* 自定义事件 */}
        <Card>
          <CardHeader>
            <CardTitle>自定义事件</CardTitle>
            <CardDescription>执行自定义点击事件</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <BackButton onClick={handleCustomClick}>
              自定义事件
            </BackButton>
            <BackButton 
              onClick={() => console.log('点击了返回按钮')}
              variant="outline"
            >
              控制台输出
            </BackButton>
          </CardContent>
        </Card>

        {/* 不同尺寸 */}
        <Card>
          <CardHeader>
            <CardTitle>不同尺寸</CardTitle>
            <CardDescription>支持多种尺寸</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center gap-2">
              <BackButton size="sm">小尺寸</BackButton>
              <BackButton size="default">默认尺寸</BackButton>
              <BackButton size="lg">大尺寸</BackButton>
            </div>
          </CardContent>
        </Card>

        {/* 禁用状态 */}
        <Card>
          <CardHeader>
            <CardTitle>禁用状态</CardTitle>
            <CardDescription>按钮禁用示例</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <BackButton disabled>禁用状态</BackButton>
            <BackButton disabled variant="outline">
              禁用状态（轮廓）
            </BackButton>
          </CardContent>
        </Card>

        {/* 无图标 */}
        <Card>
          <CardHeader>
            <CardTitle>无图标</CardTitle>
            <CardDescription>隐藏返回图标</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <BackButton showIcon={false}>仅文字</BackButton>
            <BackButton showIcon={false} variant="outline">
              仅文字（轮廓）
            </BackButton>
          </CardContent>
        </Card>
      </div>

      {/* 使用说明 */}
      <Card className="mt-8">
        <CardHeader>
          <CardTitle>使用说明</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4 text-sm">
            <div>
              <h4 className="font-semibold mb-2">Props 说明：</h4>
              <ul className="space-y-1 text-gray-600">
                <li><code>href</code>: 指定导航路径，如果提供则导航到该路径</li>
                <li><code>onClick</code>: 自定义点击事件，优先级高于 href</li>
                <li><code>variant</code>: 按钮样式变体（default, outline, ghost, link, destructive, secondary）</li>
                <li><code>size</code>: 按钮尺寸（sm, default, lg, icon）</li>
                <li><code>disabled</code>: 是否禁用按钮</li>
                <li><code>showIcon</code>: 是否显示返回图标</li>
                <li><code>children</code>: 按钮文本内容</li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-2">使用场景：</h4>
              <ul className="space-y-1 text-gray-600">
                <li>• 页面导航：返回上一页或指定页面</li>
                <li>• 表单操作：取消编辑、返回列表</li>
                <li>• 模态框：关闭弹窗、返回主界面</li>
                <li>• 步骤流程：返回上一步</li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
} 